@font-face {
  font-family: bankgothic;
  src: url('../fonts/bankgothic.ttf');
}

@font-face {
  font-family: pcdown;
  src: url('../fonts/pdown.ttf');
}

#controls {
  font-family   : pcdown;
  font-size     : 3em;
  color         : #FFF;
  position      : absolute;
  bottom        : 40;
  right         : 40;
  
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000
  ;
}

.controls {
  display: none;
}

.dialog {

  font-family     : bankgothic;  
  background-color: #fff;
  color           : #fff;
  box-shadow      : 0px 0px 50px 0px #000;
  position        : absolute;
  overflow        : hidden;
  top             : 50%;
  left            : 50%;
  width           : 600px;
  height          : 104px;
  transform       : translate(-50%, -50%);
}

.dialog.big {
  height: 200px;
}

.dialog .head {
  background-color: #506be6;
  text-align      : center;
  height          : 40px;
}

.dialog .head span:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.dialog input[type="text"] {
  width : 100%;
  height: 32px;
}

.dialog textarea {
  width : 100%;
  height: 128px;
}

.dialog button[name="submit"] {
  width : 75%;
  height: 32px;
}

.dialog button[name="cancel"] {
  width : 25%;
  height: 32px;
}